<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .main {
            width: 510px;
            margin: 0 auto;
            text-align: center;
        }

        .mainForm>div {
            line-height: 50px;
        }

        .domin {
            width: 90%;
            margin: 0 auto;
        }

        .domin>table,
        .domin>table tr {
            width: 100%;
            display: block;
        }

        .domin>table td {
            width: 24%;
            line-height: 45px;
            display: inline-block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .accomnum{
            display: none;
        }
    </style>
</head>

<body>
    <div class='main'>
        <form class='mainForm'>
            <div class='mainFormKey'>
                <label>关键词</label>
                <input type='text' placeholder="请输入关键词" class='key' name='key'>
                <label>页码</label>
                <input type='text' placeholder="页码" class='page' name='page'>
                <div class='facilitys'>
                    <label>Chrome</label>
                    <input type="checkbox" name='facility' value='chrome'>
                    <label>Firefox</label>
                    <input type="checkbox" name='facility' value='firefox'>
                    <label>IE</label>
                    <input type="checkbox" name='facility' value='IE'>
                    <label>iPhone 5</label>
                    <input type="checkbox" name='facility' value='iphone5'>
                    <label>iPhone 7</label>
                    <input type="checkbox" name='facility' value='iphone7'>
                    <label>iPhone X</label>
                    <input type="checkbox" name='facility' value='iphoneX'>
                </div>
            </div>
            <div class='accomnum'>
                <p>已完成：<span class='accomplish'>0</span>/<span class='totleNum'></span></p>
            </div>
            <div>
                <button type='button' class='mainFormSub'>提交</button>
            </div>
        </form>
    </div>
    <script src="http://lib.baomitu.com/socket.io/2.0.4/socket.io.js"></script>
    <script>
        ! function () {
            let submit = document.querySelector(".mainFormSub");
            let myHeaders = new Headers({
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            });
            let socket = io('http://localhost:8000');
            let num = 0;
            submit.onclick = function () {
                const keyv = document.querySelector('.key').value;
                const page = document.querySelector('.page').value;
                if (keyv === '') {
                    alert('关键词不能为空！')
                    return false
                } else {
                    request(keyv, page, getform())
                }
            }

            function getform() {
                const inputs = document.querySelectorAll('.facilitys input');
                const data = [];
                inputs.forEach(function (e) {
                    if (e.checked) {
                        data.push(e.value)
                    }
                })
                document.querySelector('.accomnum').style.display = 'block';
                document.querySelector('.totleNum').innerHTML = data.length;
                return data
            }
            // async function request(keyv,page,facilitys) {
            //     const response = await fetch('http://localhost:8000', {
            //         method: 'POST',
            //         headers: myHeaders,
            //         mode: 'cors',
            //         body: JSON.stringify({
            //             key: keyv,
            //             page:page,
            //             facilitys:facilitys
            //         })

            //     }).then(function (res) {　
            //         return (res.text())
            //     }).then(function (data) {
            //         console.log(JSON.parse(data))
            //         show(JSON.parse(data));
            //     })
            // }
            function request(keyv, page, facilitys) {
                socket.emit('capture', arguments);
            }

            socket.on('goback', function (data) {
                console.log(data)
                show(data)
            });

            function show(data) {
                var div = document.createElement('div'),
                    table = document.createElement('table'),
                    tr = document.createElement('tr'),
                    td = document.createElement('td'),
                    p1 = document.createElement('p'),
                    p2 = document.createElement('p'),
                    p3 = document.createElement('p'),
                    h3 = document.createElement('h3');
                div.className = 'domin';
                h3.innerHTML = data.msg;
                p2.innerHTML = data.word;
                p3.innerHTML = data.time;
                document.querySelector('.accomplish').innerHTML = ++num;
                data.dataList.forEach(c => {
                    var tr = document.createElement('tr');
                    for (ss in c) {
                        var td = document.createElement('td');
                        if (ss === 'pic' && c[ss] != '') {
                            var img = new Image;
                            img.src = c[ss];
                            td.appendChild(img);
                        } else {
                            td.innerHTML = c[ss];
                        }
                        tr.appendChild(td);
                    }
                    table.appendChild(tr)
                })
                div.appendChild(h3);
                div.appendChild(p2);
                div.appendChild(p3);
                div.appendChild(table);
                document.body.appendChild(div)
            }
        }()
    </script>
</body>

</html>